<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import {
  ElButton,
  ElForm,
  ElRow,
  ElInput,
  ElSelect,
  ElOption,
  ElInputNumber,
  ElDatePicker
} from 'element-plus'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { createHotelApi, updateHotelApi, getHotelDetailApi } from '@/api/hotel'
import { getStatesListApi } from '@/api/state'
import { getConstantValuesApi } from '@/api/constant-value'
import { Hotel } from '@/api/hotel/types'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { FormItem } from '@/components/Form'
import { useValidator } from '@/hooks/web/useValidator'
import { useCreate } from '@/hooks/web/useCreate'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { State } from '@/api/state/types'

const { push } = useRouter()

const { required } = useValidator()

const back = () => {
  push('/system/hotel')
}

const instance: Hotel = reactive(new Hotel())
const states = reactive<Array<State>>([])
const route = useRoute()

const preSave = () => {
  instance.begin_date = dayjs(instance.begin_date).format('YYYY-MM-DD')
  instance.end_date = dayjs(instance.end_date).format('YYYY-MM-DD')
}

const { elFormRef, openMode, save, loading } = useCreate({
  instance,
  route,
  preSave,
  afterSave: back,
  createApi: createHotelApi,
  updateApi: updateHotelApi
})

const rules = reactive({
  code: [required('请填写代码')],
  name: [required('请填写名称')],
  begin_date: [required('请填写开始日期')],
  end_date: [required('请填写结束日期')]
})

const stars = ref<Array<CuOption>>([])
getConstantValuesApi('stars', 'starMap').then((res) => {
  stars.value = res.data.stars
})

const title = computed(() => {
  return openMode.value === 'CREATE' ? '添加主体' : '编辑主体'
})

onMounted(async () => {
  if (openMode.value === 'UPDATE') {
    const { data } = await getHotelDetailApi(route.params.id as string)
    instance.init(data)
  }

  const stateRes = await getStatesListApi({
    country_id: '5d5f3daf-c4cf-4719-b804-0a91f231c25b',
    order: 'sequence'
  })

  if (stateRes) {
    states.length = 0
    Object.assign(states, stateRes.data.rows)
  }
})
</script>

<template>
  <ContentDetailWrap :title="title" @back="back">
    <template #right>
      <ElButton type="primary" :loading="loading" @click="save"> 保存 </ElButton>
    </template>

    <ElForm ref="elFormRef" :model="instance" label-width="100px" :rules="rules">
      <ElRow style="max-width: 800px; margin: 0 auto">
        <FormItem label="主体代码" prop="code">
          <ElInput v-model="instance.code" maxlength="50" :disabled="openMode === 'UPDATE'" />
        </FormItem>
        <FormItem label="主体名称" prop="name">
          <ElInput v-model="instance.name" maxlength="200" />
        </FormItem>
        <FormItem label="集团" prop="group">
          <ElInput v-model="instance.group" maxlength="50" />
        </FormItem>
        <FormItem label="业主" prop="owner">
          <ElInput v-model="instance.owner" maxlength="50" />
        </FormItem>
        <FormItem label="星级" prop="star">
          <ElSelect v-model="instance.star" clearable>
            <ElOption
              v-for="item of stars"
              :key="item.code"
              :value="item.code"
              :label="item.name"
            />
          </ElSelect>
        </FormItem>
        <FormItem label="房间数" prop="rooms">
          <ElInputNumber v-model="instance.rooms" controls-position="right" :min="0" />
        </FormItem>
        <FormItem label="开始日期" prop="begin_date">
          <ElDatePicker v-model="instance.begin_date" clearable />
        </FormItem>
        <FormItem label="结束日期" prop="end_date">
          <ElDatePicker v-model="instance.end_date" clearable />
        </FormItem>
        <FormItem label="省份" prop="state">
          <ElSelect v-model="instance.state_id" clearable>
            <ElOption
              v-for="item of states"
              :key="item.id!"
              :value="item.id!"
              :label="item.name"
              :disabled="item.disabled"
            />
          </ElSelect>
        </FormItem>
        <FormItem label="城市" prop="city">
          <ElInput v-model="instance.city" clearable />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="地址" prop="address">
          <ElInput v-model="instance.address" clearable />
        </FormItem>

        <FormItem label="联系人" prop="contact_name">
          <ElInput v-model="instance.contact_name" maxlength="50" />
        </FormItem>
        <FormItem label="主体电话" prop="contact_phone">
          <ElInput v-model="instance.contact_phone" maxlength="200" />
        </FormItem>
      </ElRow>
    </ElForm>
  </ContentDetailWrap>
</template>
